<template>
	<view class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10+115+60+39}px`}">
		<myTabs :title="title" @goBlack="goBlack" :mybackgroundColor="bgColor"></myTabs>
		<view v-if="isTabsScllor && trademarkObj" class="tabsScllor"
			:style="{paddingTop: `${search.height+search.top+10}px`}">
			<view class="tabsScllorTopBox">
				<view class="tabsScllorTopBoxLeft">
					<image src="/static/img/trademarkFlIcon.png"></image>
					<span>数据目录</span>
				</view>
				<view class="tabsScllorTopBoxRight">点击可查看相应数据版块</view>
			</view>
			<view class="tabsScllorTop">
				<span @click="tareegIndex(index,item.id)" v-for="(item,index) in catalogueTrue" :key="index"
					:class="index==catalogueIndex?'act':''">{{item.name}}</span>
			</view>
			<view class="tabsScllorBotton" @click="tareegBotton">
				<image :class="isBotton ? 'tabsScllorBottonTop' : ''" src="/static/img/bottomIcon.png"></image>
				<span>点击{{isBotton ? '收起' : '展开'}}</span>
			</view>
		</view>

		<image :style="{top: `${0}px`}" mode="widthFix" class="assessHeardImg" src="/static/img/trademarkBg.png">
		</image>
		<view class="trademarkIndexBox" :style="{top: `${search.height+search.top+10}px`}">
			<span @click="trademarkIndex=index" :class="trademarkIndex==index ? 'trademarkIndexBoxItem trademarkIndexBoxItem-arc' : 'trademarkIndexBoxItem'" v-for="(item,index) in trademarkObj" :key="index">{{item.brandName}}</span>
		</view>
		<view v-if="trademarkObj && isLoading==2" :style="{top: `${search.height+search.top+10+39}px`}"
			class="assess_heardBox">
			<p class="assess_heardBoxP">
				<span>{{trademarkObj[trademarkIndex].brandName}}</span>
				<span>{{trademarkObj[trademarkIndex].brandLabel}}</span>
			</p>
			<p>- 数据更新至：{{trademarkObj[trademarkIndex].month | ff_month}} -</p>

			<view class="assess_heardBoxPBox">
				<view class="assess_heardBoxPBoxItems">
					<p>{{trademarkObj[trademarkIndex].storeList.length}}家</p>
					<p>现有门店</p>
				</view>
				<view class="assess_heardBoxPBoxItems">
					<p>{{trademarkObj[trademarkIndex].consume}}元/人</p>
					<p>人均消费</p>
				</view>
				<view class="assess_heardBoxPBoxItems">
					<p>{{trademarkObj[trademarkIndex].category}}</p>
					<p>菜品品类</p>
				</view>
			</view>
		</view>
		<!-- :style="{transform: `translateY(${search.height+search.top10+115+20+60}px)`}" -->
		<view v-if="trademarkObj && isLoading==2" class="assessBoxBig">
			<!-- 该品牌经营整体： -->
			<view class="trademark_assessbox">
				<view class="trademark_assessbox_heard">
					<view class="trademark_assessbox_heard_top">
						<p>该品牌经营整体：</p>
						<p>{{trademarkObj[trademarkIndex].trendDesc}}</p>
					</view>
					<view>{{trademarkObj[trademarkIndex].trend}}</view>
				</view>
				<view class="trademark_assessbox_body">
					<view class="trademark_assessbox_bodyitems">
						<view class="trademark_assessbox_bodyitemstop">
							<span>热度指数</span>
							<image src="/static/img/trademarkHotIcon.png"></image>
						</view>
						<view class="trademark_assessbox_bodyitemstcent">
							<span>{{trademarkObj[trademarkIndex].hotIndex}}</span>
							<span
								:class="trademarkObj[trademarkIndex].hotIndexChange>=0 ? `red` : `green`">{{trademarkObj[trademarkIndex].hotIndexChange>=0 ? `+${trademarkObj[trademarkIndex].hotIndexChange}%` : `${trademarkObj[trademarkIndex].hotIndexChange}%`}}</span>
							<!-- <span>+{{trademarkObj[trademarkIndex].hotIndexChange}}%</span> -->
						</view>
						<view class="trademark_assessbox_bodyitemstbotton">前{{trademarkObj[trademarkIndex].hotIndexSort}}%</view>
					</view>
					<view class="trademark_assessbox_bodyitems">
						<view class="trademark_assessbox_bodyitemstop">
							<span>门店指数</span>
							<image src="/static/img/trademarkGreenShopIcon.png"></image>
						</view>
						<view class="trademark_assessbox_bodyitemstcent">
							<span>{{trademarkObj[trademarkIndex].manageIndex}}</span>
							<span
								:class="trademarkObj[trademarkIndex].manageIndexChange>=0 ? `red` : `green`">{{trademarkObj[trademarkIndex].manageIndexChange>=0 ? `+${trademarkObj[trademarkIndex].manageIndexChange}%` : `${trademarkObj[trademarkIndex].manageIndexChange}%`}}</span>

							<!-- <span>+{{trademarkObj[trademarkIndex].manageIndexChange}}%</span> -->
						</view>
						<view class="trademark_assessbox_bodyitemstbotton">前{{trademarkObj[trademarkIndex].manageIndexSort}}%</view>
					</view>
					<view class="trademark_assessbox_bodyitems">
						<view class="trademark_assessbox_bodyitemstop">
							<span>复购指数</span>
							<image src="/static/img/trademarkShopIcon.png"></image>
						</view>
						<view class="trademark_assessbox_bodyitemstcent">
							<span>{{trademarkObj[trademarkIndex].productIndex}}</span>
							<span
								:class="trademarkObj[trademarkIndex].productIndexChange>=0 ? `red` : `green`">{{trademarkObj[trademarkIndex].productIndexChange>=0 ? `+${trademarkObj[trademarkIndex].productIndexChange}%` : `${trademarkObj[trademarkIndex].productIndexChange}%`}}</span>

							<!-- <span>+{{trademarkObj[trademarkIndex].productIndexChange}}%</span> -->
						</view>
						<view class="trademark_assessbox_bodyitemstbotton">前{{trademarkObj[trademarkIndex].productIndexSort}}%</view>
					</view>
					<view class="trademark_assessbox_bodyitems">
						<view class="trademark_assessbox_bodyitemstop">
							<span>满意度指数</span>
							<image src="/static/img/pricingWx.png"></image>
						</view>
						<view class="trademark_assessbox_bodyitemstcent">
							<span>{{trademarkObj[trademarkIndex].satisIndex}}</span>
							<span
								:class="trademarkObj[trademarkIndex].satisIndexChange>=0 ? `red` : `green`">{{trademarkObj[trademarkIndex].satisIndexChange>=0 ? `+${trademarkObj[trademarkIndex].satisIndexChange}%` : `${trademarkObj[trademarkIndex].satisIndexChange}%`}}</span>

							<!-- <span>+{{trademarkObj[trademarkIndex].satisIndexChange}}%</span> -->
						</view>
						<view class="trademark_assessbox_bodyitemstbotton">前{{trademarkObj[trademarkIndex].satisIndexSort}}%</view>
					</view>

				</view>
			</view>

			<!-- 数据目录 -->
			<view class="trademark_assessbox numBox" id="numBox">
				<view class="trademark_assessbox_numHeard">
					<view class="trademark_assessbox_numHeardTop">
						<image src="/static/img/trademarkFlIcon.png"></image>
						<span>数据目录</span>
					</view>
					<view>点击可查看相应数据版块</view>
				</view>
				<view class="trademark_assessbox_numHeardBody">
					<span @click="tareegIndex(index,item.id)" v-for="(item,index) in catalogue" :key="index"
						:class="index==catalogueIndex?'act':''">{{item.name}}</span>
				</view>
			</view>


			<!-- 推荐考察门店 -->
			<view class="trademark_inspect">
				<view class="pages_intelligenceHeard">
					<view class="pages_intelligenceHeardLeft">推荐考察门店</view>
				</view>
				<view class="trademark_inspectHeard  trademark_inspectSceneBott"
					v-for="(item,index) in trademarkObj[trademarkIndex].storeList" :key="index">
					<view class="trademark_inspectHeardTop">
						<image src="/static/img/trademarkHotShopIcon.png"></image>
						<view>{{item.name}}</view>
					</view>
					<view class="trademark_inspectHeardBotton">
						<view class="trademark_inspectHeardBottonItems">
							<view>销售热度:</view>
							<view class="trademark_inspectHeardBottonItemsBox">
								<image v-for="nowindex in 5" :key="nowindex"
									:src="(nowindex+1)*20<=item.sale ? '/static/img/trademarkStarAct.png' : '/static/img/trademarkSart.png'">
								</image>
							</view>
						</view>
						<view class="trademark_inspectHeardBottonItems">
							<view>经营指数:</view>
							<view class="trademark_inspectHeardBottonItemsBox">
								<image v-for="nowindex in 5" :key="nowindex"
									:src="(nowindex+1)*20<=item.manage ? '/static/img/trademarkStarAct.png' : '/static/img/trademarkSart.png'">
								</image>
							</view>
						</view>
						<view class="trademark_inspectHeardBottonItems">
							<view>人均消费：</view>
							<view class="trademark_inspectHeardBottonItemsBox">
								{{item.consume}}元/人
							</view>
						</view>
						<view class="trademark_inspectHeardBottonItems">
							<view>地址:</view>
							<view class="trademark_inspectHeardBottonItemsBox">
								<span>{{item.address}}</span>
								<image src="/static/img/leftActionIcon.png"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 经营权重分析 -->
				<view class="trademark_inspectHeard" id="inspectWeight">
					<view class="trademark_inspectHeardTop">
						<image src="/static/img/trademarkHotShopIcon.png"></image>
						<view>经营权重分析</view>
					</view>
					<view class="trademark_inspectWeight">
						<view class="trademark_inspectWeightTu01">
							<!-- 	<canvas canvas-id="charts" id="charts" class="charts" @touchend="tap" /> -->

							<qiun-data-charts :onmovetip="true" type="radar" :opts="opts" :chartData="chartData"
								:canvas2d="true" canvasId="charts" :cWidth="cWidth" :cHeight="cHeight" />
						</view>
						<view class="trademark_inspectWeightBut01">
							<span>本品牌侧重：</span>
							<span>{{trademarkObj[trademarkIndex].manageMain}}</span>
						</view>
						<view class="trademark_inspectWeightBut01">
							<span>尚有提升空间：</span>
							<span>{{trademarkObj[trademarkIndex].manageCandidate}}</span>
						</view>
					</view>
				</view>

				<!-- 品牌定价策略 -->
				<view class="trademark_inspectHeard" id="inspectBrand">
					<view class="trademark_inspectHeardTop">
						<image src="/static/img/trademarkHotShopIcon.png"></image>
						<view>品牌定价策略</view>
					</view>
					<view class="trademark_inspectWeight">
						<!-- <view class="trademark_inspectWeightHeard">
							<view class="trademark_inspectWeightBrand" v-for="(item,index) in trademarkObj[trademarkIndex].priceList"
								:key="index">
								<p>¥{{item.price}}</p>
								<p>{{item.address}}客单定价集中</p>
							</view>
						</view> -->
						<view class="trademark_inspectWeightBrandBg">
							<!-- <image src="/static/img/zhuztBg.png"></image> -->
							<qiun-data-charts type="mix" :opts="brandOpts" :chartData="brandChartData" :canvas2d="true"
								canvasId="brandCharts" :cHeight="brandHeight" :cWidth="brandWidth" />
						</view>
						<p class="trademark_inspectWeightBrandEnd">- 客单定价区间分布 -</p>
					</view>
				</view>

				<!-- 选址策略 -->
				<view class="trademark_inspectHeard" id="inspectDwei">
					<view class="trademark_inspectHeardTop">
						<image src="/static/img/trademarkDweiIcon.png"></image>
						<view>选址策略</view>
					</view>
					<view class="trademark_inspectHeardBotton" v-for="(item,index) in trademarkObj[trademarkIndex].addressList"
						:key="index">

						<view class="trademark_inspectHeardBottonItems trademark_inspectHeardBottonItemsCl">
							<view class="trademark_inspectHeardBottonItemsBoxCl">开店城市：</view>
							<view class="trademark_inspectHeardBottonItemsBox trademark_inspectHeardBottonItemsBoxCl">
								{{item.name}}
							</view>
						</view>
						<view class="trademark_inspectHeardBottonItems trademark_inspectHeardBottonItemsCl">
							<view class="trademark_inspectHeardBottonItemsBoxCl">开店数量：</view>
							<view class="trademark_inspectHeardBottonItemsBox trademark_inspectHeardBottonItemsBoxCl">
								{{item.value}}家
							</view>
						</view>
					</view>
				</view>

				<!-- 推广分析 -->
				<!-- <view class="trademark_inspectHeard" id="inspectPromotion">
					<view class="trademark_inspectHeardTop">
						<image src="/static/img/trademarkPcIcon.png"></image>
						<view>推广分析</view>
					</view>
					<view class="trademark_inspectWeightSite">
						<view class="trademark_inspectSiteItems" v-for="(item,index) in trademarkObj[trademarkIndex].spreadList"
							:key="index">
							<view class="trademark_inspectSiteItemsIndex">{{index+1}}</view>
							<view class="trademark_inspectSiteItemsText">{{item.title}}</view>
							<view class="trademark_inspectSiteItemsEnd">
								<p class="trademark_inspectSiteItemsEnds">
									<span>半年售：</span>
									<span>{{item.half}}</span>
								</p>
								<p class="trademark_inspectSiteItemsEnds">
									<span>总销量：</span>
									<span>{{item.all}}</span>
								</p>
							</view>
						</view>
					</view>
				</view> -->

				<!-- 菜品结构分析 -->
				<view class="trademark_inspectHeard" id="inspectCuisine">
					<view class="trademark_inspectHeardTop">
						<image src="/static/img/trademarkDdIcon.png"></image>
						<view>重点菜品结构分析</view>
					</view>
					<view class="trademark_inspectCuisine">
						<view class="trademark_inspectCuisineHeard">
							<span>菜品定位</span>
							<span>菜品名称</span>
							<span>定价</span>
							<span>推荐指数</span>
						</view>
						<view class="trademark_inspectCuisineBox">
							<view
								:class="index%2==0 ? 'trademark_inspectCuisineHeardItem' : 'trademark_inspectCuisineHeardItem white'"
								v-for="(item,index) in trademarkObj[trademarkIndex].structureList" :key="index">
								<span>{{item.type}}</span>
								<span>{{item.name}}</span>
								<span>{{item.price | ff_price}}</span>
								<view class="trademark_inspectHeardBottonItemsBox">
									<image v-for="nowindex in 5" :key="nowindex"
										:src="(nowindex+1)*20<=item.recommend ? '/static/img/trademarkStarAct.png' : '/static/img/trademarkSart.png'">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 场景策划 -->
				<view class="trademark_inspectHeard trademark_inspectSceneBott" id="inspectScene">
					<view class="trademark_inspectHeardTop">
						<image src="/static/img/trademarkFlIcon.png"></image>
						<view>场景策划</view>
					</view>
					<view class="trademark_inspectSceneHeard">
						<view class="trademark_inspectSceneHeardItems" v-for="(item,index) in trademarkObj[trademarkIndex].scenesList"
							:key="index">
							<view class="trademark_inspectSceneHeardItemsLeft">
								<span :style="{background: colorT[index]}"
									class="trademark_inspectSceneHeardDian"></span>
								<span>{{item.name}}</span>
							</view>
							<view class="trademark_inspectSceneHeardItemsRight">{{item.value | ff_value}}%</view>
						</view>
					</view>
					<view class="trademark_inspectSceneImgBox">
						<!-- <image src="/static/img/bing001Bg.png"></image> -->
						<!-- <canvas canvas-id="sceneCharts" id="sceneCharts" class="sceneCharts" @touchend="sceneTap" /> -->
						<qiun-data-charts :onmovetip="true" type="pie" :opts="sceneOpts" :chartData="sceneChartData"
							:canvas2d="true" canvasId="sceneCharts" :cHeight="sceneHeight" :cWidth="sceneWidth" />

					</view>
				</view>
				<!-- 服务策划 -->
				<view class="trademark_inspectHeard trademark_inspectSceneBott" id="inspectServe">
					<view class="trademark_inspectHeardTop">
						<image src="/static/img/trademarkAiIcon.png"></image>
						<view>服务策划</view>
					</view>
					<view class="trademark_inspectSceneHeard">
						<view class="trademark_inspectSceneHeardItems" v-for="(item,index) in trademarkObj[trademarkIndex].serviceList"
							:key="index">
							<view class="trademark_inspectSceneHeardItemsLeft">
								<span :style="{background: colorT[index]}"
									class="trademark_inspectSceneHeardDian"></span>
								<span>{{item.name}}</span>
							</view>
							<view class="trademark_inspectSceneHeardItemsRight">{{item.value | ff_value}}%</view>
						</view>
					</view>
					<view class="trademark_inspectSceneImgBox">
						<!-- <image src="/static/img/bing001Bg.png"></image> -->
						<!-- <canvas canvas-id="serveCharts" id="serveCharts" class="serveCharts" @touchend="sceneTap" /> -->
						<qiun-data-charts :onmovetip="true" type="pie" :opts="sceneOpts" :chartData="serveChartData"
							:canvas2d="true" canvasId="serveCharts" :cHeight="sceneHeight" :cWidth="sceneWidth" />
					</view>

				</view>
				<!-- 环境策略 -->
				<view class="trademark_inspectHeard trademark_inspectSceneBott" id="inspectAtmosphere">
					<view class="trademark_inspectHeardTop">
						<image src="/static/img/trademarkHotShopIcon.png"></image>
						<view>环境策略</view>
					</view>
					<view class="trademark_inspectSceneHeard">
						<view class="trademark_inspectSceneHeardItems"
							v-for="(item,index) in trademarkObj[trademarkIndex].environmentList" :key="index">
							<view class="trademark_inspectSceneHeardItemsLeft">
								<span :style="{background: colorT[index]}"
									class="trademark_inspectSceneHeardDian"></span>
								<span>{{item.name}}</span>
							</view>
							<view class="trademark_inspectSceneHeardItemsRight">{{item.value | ff_value}}%</view>
						</view>
					</view>
					<view class="trademark_inspectSceneImgBox">
						<!-- <image src="/static/img/bing001Bg.png"></image> -->
						<!-- 	<canvas canvas-id="strategyCharts" id="strategyCharts" class="strategyCharts"
							@touchend="sceneTap" /> -->
						<qiun-data-charts :onmovetip="true" type="pie" :opts="sceneOpts" :chartData="strategyChartData"
							:canvas2d="true" canvasId="strategyCharts" :cHeight="sceneHeight" :cWidth="sceneWidth" />
					</view>
				</view>

			</view>


		</view>
		<view v-else :style="{paddingTop: `${search.height+search.top+10}px`}" class="kong">
			<load v-if="isLoading==1" :myBottom="15" @updataIsLoading="updataIsLoading" :isLoading="isLoading"></load>
			<empty v-else-if="isLoading==0"></empty>
		</view>
	</view>

</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	import myTabs from "@/components/myTabs/index.vue"
	import load from "@/components/load/index.vue"
	import empty from "@/components/empty/index.vue"

	export default {
		components: {
			empty,
			load,
			myTabs
		},
		data() {
			return {
				isLoading: 1,
				brandName: '',
				title: '对标参考品牌',
				trademarkObj: null,
				bgColor: 'transparent',
				isTabsScllor: false,
				cWidth: 295,
				cHeight: 290,
				brandWidth: 295,
				brandHeight: 150,
				sceneWidth: 300,
				sceneHeight: 210,
				catalogueIndex: 0,
				tastText: '加载中',
				catalogueTrue: [{
						name: '经营权重分析',

					},
					{
						name: '定价分析',
						id: 'inspectBrand'

					},
					{
						name: '选址分布',
						id: 'inspectDwei'
					}
				],
				cataloguePart: [{
						name: '经营权重分析',
						id: 'inspectWeight'
					},
					{
						name: '定价分析',
						id: 'inspectBrand'
					},
					{
						name: '选址分布',
						id: 'inspectDwei'
					}
				],
				catalogue: [{
						name: '经营权重分析',
						id: 'inspectWeight'
					},
					{
						name: '定价分析',
						id: 'inspectBrand'
					},
					{
						name: '选址分布',
						id: 'inspectDwei'
					},
					{
						name: '推广分析',
						id: 'inspectPromotion'
					},
					{
						name: '菜品结构',
						id: 'inspectCuisine'
					},
					{
						name: '场景策划',
						id: 'inspectScene'
					},
					{
						name: '服务策划',
						id: 'inspectServe'
					},
					{
						name: '环境风格',
						id: 'inspectAtmosphere'
					},
				],
				colorT: ["#ffae69", "#98b2ff", "#ffc15c",
					"#ffea64", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					"#ea7ccc"
				],
				isBotton: false,
				top: 0,
				sceneChartData: {},
				serveChartData: {},
				strategyChartData: {},
				sceneOpts: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#ffae69", "#98b2ff", "#ffc15c",
						"#ffea64", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 0, 5, 0],
					fontSize: 10,
					fontColor: "#999",
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "bottom",
						float: "center",
						padding: 0,
						margin: 0,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#999",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 5,
							border: false,
							borderWidth: 0,
							borderColor: "#FFFFFF",
							customRadius: 70,
							linearType: "none"
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
						 gridColor: "#CCCCCC",
							fontColor: "#FFFFFF",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						}
					}
				},
				chartData: {},
				opts: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#ffda2d", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 5, 5, 0],
					fontSize: 13,
					fontColor: "#999999",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#999",
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#CCCCCC",
							gridCount: 5,
							opacity: 1,
							max: 200,
							gridEval: 1,
							axisLabel: false,
							axisLabelTofix: 0,
							labelColor: "#999",
							labelPointShow: false,
							labelPointRadius: 3,
							labelPointColor: "#CCCCCC",
							border: false,
							borderWidth: 2,
							linearType: "none"
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							fontColor: "#FFFFFF",
							splitLine: false,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#999"
						}
					}
				},
				trademarkIndex: 0,
				brandChartData: {},
				//这里的 opts 是图表类型 type="column" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['column'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				brandOpts: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#ffdc36", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 0, 0, 0],
					fontSize: 13,
					fontColor: "#999",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: true,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "bottom",
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#999",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: false,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#999",
						fontSize: 13,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "center",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "solid",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						min: 0,
						format: ""
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 4,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: "",
								type: "value",
								disabled: true,
								axisLine: true,
								axisLineColor: "#CCCCCC",
								calibration: false,
								fontColor: "#999",
								fontSize: 13,
								textAlign: "right",
								titleFontSize: 13,
								titleOffsetY: 0,
								titleOffsetX: 0,
								titleFontColor: "#999",
								min: null,
								max: null,
								tofix: null,
								unit: "",
								format: ""
							},
							{
								position: "left",
								min: 0,
								max: null,
								title: "",
								textAlign: "right",
								type: "value",
								disabled: false,
								axisLine: false,
								axisLineColor: "#CCCCCC",
								calibration: false,
								fontColor: "#999",
								fontSize: 13,
								titleFontSize: 13,
								titleOffsetY: 0,
								titleOffsetX: 0,
								titleFontColor: "#999",
								tofix: null,
								unit: "",
								format: ""
							},
							{
								position: "right",
								min: null,
								max: null,
								title: "",
								textAlign: "right",
								type: "value",
								disabled: true,
								axisLine: true,
								axisLineColor: "#CCCCCC",
								calibration: false,
								fontColor: "#999",
								fontSize: 13,
								titleFontSize: 13,
								titleOffsetY: 0,
								titleOffsetX: 0,
								titleFontColor: "#999",
								tofix: null,
								unit: "",
								format: ""
							}
						]
					},
					extra: {
						mix: {
							column: {
								width: 35,
								seriesGap: 2,
								barBorderCircle: false,
								barBorderRadius: [
									12,
									12,
									0,
									0
								],
								linearType: "none",
								linearOpacity: 1,
								colorStop: 1
							},
							area: {
								opacity: 0.2,
								gradient: false
							}
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							fontColor: "#FFFFFF",
							splitLine: false,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#999"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				}

			}
		},
		onLoad(oprtion) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			if (oprtion) {
				this.brandName = oprtion.brandName;
			}

		},
		onPageScroll(e) {
			this.top = e.scrollTop;
			if (e.scrollTop == 0) {
				this.bgColor = 'transparent'
			} else {
				this.bgColor = '#fff'
			}

			uni.createSelectorQuery().select(`#numBox`).boundingClientRect(data => {
				if (data.top >= 0) {
					this.isTabsScllor = false;
				} else {
					this.isTabsScllor = true;
				}
			}).exec();

		},
		onReady() {

			this.init();

		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			location() {
				return this.$store.state.location;
			},

		},
		watch:{
			trademarkIndex(newVal,oldVal){
				this.getServerData();
			}
		},
		filters: {
			ff_price(val) {
				let nowVal = val == '暂无' ? '暂无' : `￥${val}`
				return nowVal
			},
			ff_month(val) {
				let year = new Date(val).getFullYear();
				let moth = new Date(val).getMonth() + 1 < 10 ? `0${new Date(val).getMonth()+1}` : new Date(val)
					.getMonth() + 1;
				let day = new Date(val).getDay() + 1 < 10 ? `0${new Date(val).getDay()+1}` : new Date(val).getDay() + 1;
				return `${year}年${moth}月${day}日`
			},
			ff_value(val) {
				return Number(val).toFixed(2)
			}
		},
		methods: {
			updataIsLoading(index) {
				if (index == 2) {
					this.isLoading = this.trademarkObj ? index : 0;
				}
			},
			tareegBotton() {
				this.isBotton = !this.isBotton;
				this.catalogueTrue = this.isBotton ? this.catalogue : this.cataloguePart;
			},
			tareegIndex(index, id) {
				this.catalogueIndex = index;
				uni.createSelectorQuery().select(`#${id}`).boundingClientRect(data => { //目标节点、也可以是最外层的父级节点
					console.log('id--->top', data.top, id)
					this.top = this.top + data.top
					uni.pageScrollTo({
						scrollTop: this.top,
						duration: 1000
					});

				}).exec();
			},
			init() {
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// })
				let location = uni.getStorageSync('location');
				let variety = uni.getStorageSync('variety');
				console.log('brandName', this.brandName)
				this.$api.analysisBenchmarkGetPPname({
					cityId: location.id,
					categoryId: variety.children[0].id,
					brandName: this.brandName ? this.brandName : ''
				}).then(res => {
					if (res.code == 200) {
						this.trademarkObj = res.data;
						this.isLoading = 1;
						setTimeout(() => {
							this.getServerData();
						}, 1000)
					} else if (res.code == 504) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: res.msg
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/package/marketing/index'
							})
						}, 1000)

					} else {

						this.trademarkObj = null;
						this.isLoading = 1;
						this.tastText = '暂无内容'
						uni.hideLoading()
					}
				})

			},

			getServerData() {
				//经营权重分析
				var dimensionCategories = [];
				var dimensionSeries = [];
				this.trademarkObj[this.trademarkIndex].dimensionList.forEach(item => {
					dimensionCategories.push(item.name);
					dimensionSeries.push(Number(Number(item.value).toFixed(2)));
				})
				var res = {
					categories: dimensionCategories,
					series: [{
						name: "",
						data: dimensionSeries
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));


				//品牌定价策略
				var brandCategories = [];
				var brandSeries = [];
				this.trademarkObj[this.trademarkIndex].priceList.forEach((item, index) => {
					
					// if (index) {
					// 	brandSeries.push({
					// 		value: item.value,
					// 		color: '#72A8FE'
					// 	});
					// } else {
						if(item.address == this.location.name){
							brandCategories.push(item.price);
							brandSeries.push(item.num);
						}
						
					// }

				})
				console.log('品牌定价策略 brandSeries', brandSeries)

				var res = {
					categories: brandCategories,
					series: [{
						name: "",
						index: 1,
						type: "column",
						data: brandSeries
					}]
				};
				this.brandChartData = JSON.parse(JSON.stringify(res));

				//场景策划
				let scenesList = [];
				var nowValue = 0;
				this.trademarkObj[this.trademarkIndex].scenesList.forEach(item => {
					nowValue = Number(nowValue) +  Number(item.value);
				})
				this.trademarkObj[this.trademarkIndex].scenesList.forEach(item => {
					let value = (Number(item.value) / Number(nowValue)  * 100);
					scenesList.push({
						name: item.name,
						value: Number( Number(item.value).toFixed(2)),
						labelText: `${item.name}:${Number(value.toFixed(2))}%`
					});
					item.value = Number(value.toFixed(2))
				})
				var res = {
					series: [{
						data: scenesList
					}]
				};
				this.sceneChartData = JSON.parse(JSON.stringify(res));
				//服务策划
				let serviceList = [];
				var nowValue = 0;
				this.trademarkObj[this.trademarkIndex].serviceList.forEach(item => {
					nowValue = Number(nowValue) +  Number(item.value);
				})
				this.trademarkObj[this.trademarkIndex].serviceList.forEach(item => {
					let value = (Number(item.value) / Number(nowValue)  * 100);
					serviceList.push({
						name: item.name,
						value: Number( Number(item.value).toFixed(2)),
						labelText: `${item.name}:${Number(value.toFixed(2))}%`
					});
					item.value = Number(value.toFixed(2))
				})
				var res = {
					series: [{
						data: serviceList
					}]
				};
				this.serveChartData = JSON.parse(JSON.stringify(res));
				//环境策略
				let environmentList = [];
				var nowValue = 0;
				this.trademarkObj[this.trademarkIndex].environmentList.forEach(item => {
					nowValue = Number(nowValue) +  Number(item.value);
				})
				this.trademarkObj[this.trademarkIndex].environmentList.forEach(item => {
					let value = (Number(item.value) / Number(nowValue)  * 100);
					environmentList.push({
						name: item.name,
						value: Number( Number(item.value).toFixed(2)),
						labelText: `${item.name}:${Number(value.toFixed(2))}%`
					});
					item.value = Number(value.toFixed(2))
				})
				var res = {
					series: [{
						data: environmentList
					}]
				};
				this.strategyChartData = JSON.parse(JSON.stringify(res));
				uni.hideLoading();
			},


			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},

			goBlack() {
				uni.navigateBack();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pages_intelligence {
		// background-color: #FFDF13;
		height: 100vh;
		box-sizing: border-box;
		// overflow: scroll;
		position: relative;

		.tabsScllorTopBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.tabsScllorTopBoxLeft {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}

			span {
				display: inline-block;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 44rpx;
				color: #333333;
			}
		}

		.tabsScllorTopBoxRight {
			height: 32rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 32rpx;
			color: #999999;
		}

		.tabsScllorBotton {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 32rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			span {
				display: inline-block;
				height: 32rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #666666;
			}
		}

		.tabsScllorBottonTop {
			transform: rotateZ(180deg);
		}

		.tabsScllorTop {

			border-top: 1rpx solid transparent;

			span {
				display: inline-block;
				margin-top: 32rpx;
				margin-right: 48rpx;
				width: 196rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #f4f4f4;
				opacity: 1;
				border-radius: 8rpx;
				color: #666666;
				font-size: 28rpx;
			}



			span:nth-child(3n) {
				margin-right: 0;
			}


		}

		.act {
			background: #FFDA2D !important;
			color: #000 !important;
		}

		.tabsScllor {
			transition: all 1.5s;
			position: fixed;
			top: 0;
			left: 0;
			background-color: #fff;
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			z-index: 2;
			box-shadow: 0 0 30rpx 4rpx #ddd;
		}

		.trademark_inspectCuisineHeard {
			display: flex;
			align-items: center;
			padding: 0 16rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #7f7f7f;

			}

			span:nth-child(1) {
				flex: 0 0 96rpx;
				width: 96rpx;
				margin-right: 31rpx;

			}

			span:nth-child(2) {
				flex: 1;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;

			}

			span:nth-child(3) {
				flex: 0 0 74rpx;
				text-align: right;

			}

			span:nth-child(4) {
				flex: 0 0 160rpx;
				text-align: right;

			}

		}

		.white {
			background-color: #fff !important;
		}

		.trademark_inspectCuisineBox {
			border-radius: 16rpx;
			overflow: hidden;
		}

		.trademark_inspectCuisineHeardItem {
			display: flex;
			align-items: center;
			padding: 16rpx;
			box-sizing: border-box;
			background: #f7f7f7;

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 34rpx;
				color: #333;

			}

			span:nth-child(1) {
				flex: 0 0 104rpx;
				margin-right: 24rpx;
				width: 104rpx;
				height: 38rpx;
				line-height: 38rpx;
				background: #ebebeb;
				opacity: 1;
				border-radius: 8rpx;
				text-align: center;

			}

			span:nth-child(2) {
				flex: 1;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				height: 38rpx;
				line-height: 38rpx;


			}

			span:nth-child(3) {
				flex: 0 0 74rpx;
				text-align: right;

			}

			span:nth-child(4) {
				flex: 0 0 160rpx;

			}

			.trademark_inspectHeardBottonItemsBox {
				flex: 0 0 160rpx;
				width: 160rpx;
				justify-content: flex-end;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.trademark_inspectSceneImgBox {
			width: 100%;
			// height: 400rpx;
			display: flex;
			justify-content: center;
			margin: 0rpx 0 24rpx 0;

			image {
				height: 400rpx;
				width: 400rpx;
			}

			.sceneCharts {
				height: 400rpx;
				width: 400rpx;
			}

			.serveCharts {
				height: 400rpx;
				width: 400rpx;
			}

			.strategyCharts {
				height: 400rpx;
				width: 400rpx;
			}
		}

		.trademark_inspectSceneHeard {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.trademark_inspectSceneHeardDian {
			border-radius: 50%;
			display: inline-block;
			width: 12rpx;
			height: 12rpx !important;
			margin-right: 8rpx;
		}

		.trademark_inspectSceneHeardItemsRight {
			height: 36rpx;
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 36rpx;
			color: #333333;
		}

		.trademark_inspectSceneHeardItemsLeft {
			display: flex;
			align-items: center;

			&>span {
				display: inline-block;
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 36rpx;
				color: #333333;
			}
		}

		.trademark_inspectSceneHeardItems {
			flex: 0 0 312rpx;
			width: 312rpx;
			height: 60rpx;
			align-items: center;
			line-height: 60rpx;
			background: #f7f7f7;
			padding: 16rpx;
			box-sizing: border-box;
			margin-bottom: 14rpx;
			opacity: 1;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
		}

		.trademark_inspectHeardTop {
			display: flex;
			margin-bottom: 24rpx;

			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 6rpx;
			}

			&>view {
				height: 42rpx;
				font-size: 30rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 42rpx;
				color: #333333;
			}

		}

		.trademark_inspectSiteItemsEnd {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			flex: 1;
		}

		.trademark_inspectSiteItemsEnds {
			display: flex;

			span {
				display: inline-block;
			}

			span:nth-child(1) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 34rpx;
				color: #7f7f7f;
			}

			span:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 34rpx;
				color: #333333;
			}
		}



		.trademark_inspectSiteItemsText {
			flex: 0 0 288rpx;

			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 30rpx;
			color: #333333;
		}

		.trademark_inspectSiteItemsIndex {
			width: 34rpx;
			height: 34rpx;
			flex: 0 0 34rpx;
			line-height: 34rpx;
			background: #FFDE16;
			opacity: 1;
			border-radius: 8rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			color: #333333;
			margin-right: 32rpx;
		}

		.trademark_inspectWeightBrandEnd {
			height: 28rpx;
			font-size: 20rpx;
			margin-top: 16rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 28rpx;
			color: #999999;
			text-align: center;
		}

		.trademark_inspectWeightBrandBg {
			width: 100%;
			height: 300;
			// margin-top: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.brandCharts {
				width: 590rpx;
				height: 300;

			}
		}

		.trademark_inspectWeightHeard {
			display: flex;

		}

		.trademark_inspectWeightBrand {
			flex: 1;

			// margin-bottom: 20rpx;
			p {
				text-align: center;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
			}

			p:nth-child(1) {
				height: 56rpx;
				font-size: 40rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 56rpx;
				margin-top: 8rpx;
				color: #333333;
			}
		}

		.trademark_inspectSiteItems {
			display: flex;
			align-items: center;
			padding: 16rpx;
			box-sizing: border-box;
		}

		.trademark_inspectWeightSite {
			width: 638rpx;
			border-radius: 16rpx;
		}

		.trademark_inspectHeard {
			width: 686rpx;
			background: #fff;
			opacity: 1;
			border-radius: 24rpx;
			margin: 16rpx 0 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
			border-bottom: 1rpx transparent solid;

		}

		.trademark_inspectSceneBott {
			padding-bottom: 0;
		}

		.trademark_inspectWeightBut01 {
			width: 590rpx;
			height: 82rpx;
			line-height: 82rpx;
			background: #EBEBEB;
			border-radius: 16rpx;
			margin-top: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.trademark_inspectHeardBotton {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.trademark_inspectHeardBottonItemsCl {
			justify-content: center;
		}

		.trademark_inspectHeardBottonItemsBoxCl {
			display: inline-block !important;
			flex: 1 !important;
		}

		.trademark_inspectHeardBottonItemsBox {
			height: 36rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 36rpx;
			color: #333333;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: flex;
			align-items: center;

			span {
				display: inline-block;
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 36rpx;
				color: #333333;
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			image {
				width: 24rpx !important;
				height: 24rpx !important;
			}
		}

		.trademark_inspectWeightTu01 {


			image {
				width: 100%;
				height: 100%;
			}

			.charts {
				width: 590rpx;
				height: 580rpx;
			}
		}


		.trademark_inspectWeight {
			width: 638rpx;
			padding: 24rpx;
			display: flex;
			flex-direction: column;
			opacity: 1;
			border-radius: 16rpx;
			box-sizing: border-box;
			background: #F7F7F7;

			span:nth-child(1) {
				display: inline-block;
				height: 42rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 42rpx;
				color: #898989;
			}

			span:nth-child(2) {
				display: inline-block;
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 42rpx;
				color: #333;
			}
		}

		.trademark_inspectHeardBottonItems {
			width: 312rpx;
			height: 66rpx;
			align-items: center;
			background: #f6f6f6;
			opacity: 1;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			padding: 16rpx;
			display: flex;
			box-sizing: border-box;

			&>view:nth-child(1) {
				flex: 1;
				display: inline-block;
				height: 36rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 36rpx;
				color: #999999;
			}

			&>view:nth-child(2) {
				flex: 0 0 150rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.trademark_assessbox_body {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

		}

		.trademark_assessbox_bodyitems {
			width: 308rpx;
			height: 200rpx;
			background: #f7f7f7;
			border-radius: 16rpx;
			padding: 24rpx;
			box-sizing: border-box;
			margin-bottom: 22rpx;
		}

		.trademark_assessbox_bodyitemstbotton {
			height: 42rpx;
			line-height: 42rpx;
			display: inline-block;
			padding: 0 12rpx;
			background: rgba(252, 229, 81, 0.39);
			border-radius: 8rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.trademark_assessbox_bodyitemstcent {
			margin: 16rpx 0 8rpx 0;
			display: flex;
			justify-content: space-between;

			span {
				height: 58rpx;
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 58rpx;
				color: #333333;
				opacity: 1;
			}

			span:nth-child(2) {
				color: #FF471C;
			}
		}

		.trademark_assessbox_bodyitemstop {
			display: flex;
			justify-content: space-between;

			span {
				display: inline-block;
				height: 32rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #666666;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.assess_heardBoxP {
			display: flex;
			justify-content: center;
			align-items: center;

			span:nth-child(2) {
				display: inline-block;
				height: 42rpx;
				line-height: 42rpx;
				background: #ffffff;
				opacity: 1;
				border-radius: 12rpx;
				margin-left: 12rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				padding: 0 12rpx;
				color: #333333;
			}
		}

		.assessBoxBig {
			// left: 50%;
			// transform: translateX(-50%);
			// position: absolute;
			padding: 0 32rpx;
			box-sizing: border-box;
			background: #FFDF13;
			padding-bottom: 52rpx;
		}

		.assessBox_statusBoxItems {
			width: 312rpx;
			height: 130rpx;
			border-radius: 16rpx;
			padding: 16rpx;
			box-sizing: border-box;
			background-color: #fef8ce;
			margin-bottom: 22rpx;

		}

		.pages_end {
			padding: 32rpx 0 48rpx 0;
			text-align: center;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #CCCCCC;
		}


		.assessBox_statusBoxItems:nth-child(3) {
			margin-top: 14rpx;
		}

		.assessBox_statusBoxItems:nth-child(4) {
			margin-top: 14rpx;
		}

		.assessBox_statusBoxItemsTop {
			display: flex;

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #333333;
				margin-left: 4rpx;

			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.trademarkIndexBox{
			position: absolute;
			left: calc(50% - 343rpx);
			
			width: 686rpx;
			height: 78rpx;
			margin: 24rpx auto 0;
			background: #fff;
			box-shadow: 0px 0px 32rpx rgba(0,0,0,0.0400);
			opacity: 1;
			border-radius: 16rpx;
			padding: 8rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
		}
		.trademarkIndexBoxItem{
			// width: 218rpx;
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
			background: #f4f4f4;
			opacity: 1;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;
			text-align: center;
			padding: 0 10rpx;
			box-sizing: border-box;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 16rpx;
			
		}
		.trademarkIndexBoxItem:last-child{
			margin-right: 0rpx;
		}
		.trademarkIndexBoxItem-arc{
			background: #FFDA2D;
			color: #333;
		}

		.assessHeardImg {
			position: absolute;
			width: 100%;
			z-index: -1;
			background: #FFDF13;
		}

		.assess_heardBoxPBox {
			display: flex;
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.assess_heardBoxPBoxItems {
			flex: 1;
			text-align: center;
			overflow: hidden;

			p:nth-child(1) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 40rpx;
				color: #333333;
				margin-bottom: 4rpx;
				width: 100%;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    overflow: hidden;
				
			}

			p:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #94853a;
			}
		}

		.pages_intelligenceHeard {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
		}

		.cuisinePricingBox_mainItemss {
			display: flex;
			padding-bottom: 24rpx;
		}

		.trademark_assessbox_numHeardBody {
			span {
				display: inline-block;
				background: #f4f4f4;
				text-align: center;
				width: 194rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin: 0 24rpx 24rpx 0;
			}

			span:nth-child(3n) {
				margin-right: 0;
			}
		}

		.trademark_assessbox_numHeardTop {
			display: flex;
			align-items: flex-end;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 8rpx;
			}

			span {
				display: inline-block;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 44rpx;
				color: #333333;
			}
		}

		.trademark_assessbox_numHeard {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 32rpx;

			&>view:nth-child(2) {
				display: inline-block;
				height: 32rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #999999;
			}
		}

		.trademark_assessbox {
			width: 686rpx;
			background: #fff;
			opacity: 1;
			border-radius: 24rpx;
			padding: 24rpx;
			padding-bottom: 0;
			box-sizing: border-box;
		}

		.numBox {
			margin: 24rpx 0;
		}

		.trademark_assessbox_heard {
			height: 130rpx;
			background: linear-gradient(90deg, rgba(255, 218, 45, 0) 0%, #FEF8CE 50%, rgba(255, 218, 45, 0) 100%);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			&>view:nth-child(2) {
				flex: 6;
				height: 80rpx;
				font-size: 56rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 80rpx;
				color: #FF8900;
				text-align: left;
			}
		}

		.trademark_assessbox_heard_top {
			flex: 7;

			p {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 40rpx;
				color: #333333;
				text-align: right;
			}

			p:nth-child(2) {
				padding-right: 26rpx;
			}
		}

		.cuisinePricingBox_mainItemsImgBox {
			width: 144rpx;
			height: 144rpx;
			margin-right: 24rpx;
			border-radius: 16rpx;
			flex: 0 0 144rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.cuisinePricingBox_mainItemsImgBoxRight {
			flex: 1;

		}

		.cuisinePricingBox_mainItemsImgBoxRightName {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 40rpx;
			color: #333333;
		}

		.cuisinePricingBox_mainItemsImgBoxRightBottonBox {
			display: flex;
		}

		.cuisinePricingBox_mainItemsImgBoxRightTops {
			flex: 1;

			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
			}
		}

		.cuisinePricingBox_main {
			margin-top: 32rpx;

		}

		.pages_intelligenceHeardLeft {
			// border-left: 8rpx solid #FFDA2D;
			height: 40rpx;
			font-size: 32rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 40rpx;
			color: #333333;
			position: relative;
			padding-left: 16rpx;

			&::after {
				content: "";
				width: 8rpx;
				height: 32rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #000;

			}
		}

		.cuisinePricingBox_mainItems_text {
			height: 34rpx;
			margin-top: 8rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #999999;
		}

		.cuisinePricingBox_mainitesText {
			height: 38rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 38rpx;
			color: #000000;
			text-align: center;
			flex: 1;
		}

		.cuisinePricingBox_mainitesImg {
			width: 122rpx;
			height: 122rpx;
			border-radius: 24rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.cuisinePricingBox_mainites {
			display: inline-block;
			width: 310rpx;
			height: 122rpx;
			display: flex;
			background: #f7f7f7;
			border-radius: 24rpx;
			align-items: center;
			margin-top: 16rpx;
		}

		.cuisineBox_heardTwoMain {
			margin-top: 16rpx;

			span {
				display: inline-block;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				padding: 0 12rpx;
				border-radius: 10rpx;
				background-color: #FFDA2D;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;

			}
		}

		.cuisinePricingBox_mainItems {
			display: flex;

			view:nth-child(1) {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
			}

			view:nth-child(2) {
				flex: 1;
				height: 34rpx;
				display: flex;
				align-items: center;
			}

		}


		.cuisinePricingBox {
			padding: 24rpx;
			padding-bottom: 0;
			border-radius: 24rpx;
			background: #fff;
			margin: 24rpx 0;
		}

		.assessBox_statusBox {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 24rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: space-evenly;
			flex-wrap: wrap;
		}

		.assess_heardBox {
			position: absolute;
			left: 0;
			width: 100%;
			margin: 68rpx 0;

			p {
				text-align: center;
			}

			p:nth-child(1) {
				height: 56rpx;
				font-size: 40rpx;
				font-family: 蘋方-簡;
				font-weight: bold;
				line-height: 56rpx;
				color: #343434;
				margin-bottom: 8rpx;
			}

			&>p:nth-child(2) {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #343434;
				margin-bottom: 40rpx;
			}
		}

		.red {
			color: #FF471C !important;
		}

		.green {
			color: #3AD346 !important;
		}

		.assessBox_statusBoxItemsBotton {
			margin-top: 16rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			span {
				display: inline-block;
				height: 44rpx;
				font-size: 36rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 44rpx;
				color: #333333;
			}
		}

		.kong {
			height: 100%;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: #fff;
		}


	}
</style>
